
.photobooth{
	position: relative;
	font: 11px arial,sans-serif;
	overflow: hidden;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
}

.photobooth canvas{
	position: absolute;
	left: 0;
	top: 0;
}
.photobooth .blind{
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	z-index: 1;

}
.photobooth .blind.anim{
	transition: opacity 1500ms ease-out;
	-o-transition: opacity 1500ms ease-out;
	-moz-transition: opacity 1500ms ease-out;
	-webkit-transition: opacity 1500ms ease-out;
}
.photobooth .warning{
	position: absolute;
	top:45%;
	background: #ffebeb;
	color:#cf0000;
	border:1px solid #cf0000;
	width: 60%;
	left: 50%;
	margin-left: -30%;
	display: none;
	padding: 5px;
	z-index: 10;
	text-align: center;
}

.photobooth .warning span{
	text-decoration: underline;
	cursor: pointer;
	color: #333;
}
.photobooth ul{
	width: 30px;
	position: absolute;
	right: 0;
	top: 0;
	background: rgba( 0, 0, 0, 0.6 );
	height: 190px;
	z-index: 2;
	border-bottom-left-radius: 5px;
}


.photobooth ul li{
	width: 30px;
	height: 38px;
	background-repeat: no-repeat;
	background-position: center center;
	cursor: pointer;
	position: relative;
}

.photobooth ul li:hover{
	background-color:#aaa;
}
.photobooth ul li.selected{
	background-color: #ccc;
}

.photobooth ul.noHSB{
	height: 80px;
}
.photobooth ul.noHSB li.hue,
.photobooth ul.noHSB li.saturation,
.photobooth ul.noHSB li.brightness{
	display: none;
}
.photobooth ul li.hue{
	background-image: url();
}
.photobooth ul li.saturation{
	background-image: url();
}
.photobooth ul li.brightness{
	background-image: url();
}
.photobooth ul li.crop{
	background-image: url();
}
.photobooth ul li.trigger{
	background-image: url();
}

.photobooth .submenu{
	background: rgba( 0, 0, 0, 0.6 );
	position: absolute;
	width: 100px;
	opacity: 0;
	height: 20px;
	padding: 5px 10px;
	color: #fff;
	top: 4px;
	left: -124px;
	border-radius: 5px;

	-webkit-transition: opacity 500ms ease;
	-moz-transition: opacity 500ms ease;
	-o-transition: opacity 500ms ease;
	-msie-transition: opacity 500ms ease;
	transition: opacity 500ms ease;
}

.photobooth li:hover .submenu{
	opacity: 1;
}

.photobooth .submenu .tip{
	width: 4px;
	height: 8px;
	position: absolute;
	right: -4px;
	top: 50%;
	margin-top: -2px;
	background: url();
}

.photobooth .submenu .slider{
	width: 100px;
	height: 20px;
	position: relative;
}

.photobooth .submenu .slider .track{
	height: 2px;
	width: 100px;
	position: absolute;
	top:9px;
	background:rgba(255,255,255,0.6);
}

.photobooth .submenu .slider .handle{
	height: 14px;
	width: 2px;
	position: absolute;
	top:3;
	background:#fff;
	z-index: 2;
}

.photobooth .submenu .slider .handle div{
	position: absolute;
	z-index: 3;
	width: 20px;
	top: -3px;
	height: 20px;
	cursor: w-resize;
	left: -9px;
}

/***************
* Resize Handle
***************/
.resizehandle{
	position: absolute;
	z-index: 1;
	width: 100px;
	height: 100px;
	left: 30px;
	top: 30px;
	cursor: move;
	outline: 1500px solid rgba( 0,0,0,0.35 );
	box-shadow: 2px 2px 10px rgba(0,0,0,0.5), 0 0 3px #000;
	opacity: 0;
	transition: opacity 500ms ease;
	-moz-transition: opacity 500ms ease;
	-o-transition: opacity 500ms ease;
	-webkit-transition: opacity 500ms ease;
}
/**
* Opera doesn't deal with the outline
* correctly
*/
noindex:-o-prefocus,.resizehandle{
	outline: none !important;
}
/**
* Firefox messes the display of
* box shadow on top of a rgba outline up
* so let's turn it of
*/
@-moz-document url-prefix(){
	.resizehandle{
		box-shadow: none !important; 
	}
}
.resizehandle .handle{
	width: 100%;
	height: 100%;
	border: 2px dashed #0da4d3;
	margin: -2px 0 0 -2px;
	z-index: 3;
	position: relative;
}

.resizehandle .handle div{
	width: 18px;
	height: 18px;
	position: absolute;
	right: -2px;
	bottom: -2px;
	z-index: 4;
	cursor: se-resize;
	background-image: url();
	background-position: top left;
	background-repeat: no-repeat;
}